<template>
	<view>
		<view class="waiguan-color-view">
			<view class="waiguan-color-text">外观颜色</view>
		</view>
		<view class="waiguan-list-view-box">
			<view :class="tempWaiguan==999?'color-item-bc-select-view':'color-item-bc-view'">
				<view :class="tempWaiguan==999?'color-item-select-class':'color-item-class'"
					@click="selectWaiguanClickNOLimi()">不限</view>
			</view>
			<view v-for="(item,index) in colorWaiguanDataList">
				<view :class="tempWaiguan==index?'color-item-bc-select-view':'color-item-bc-view'">
					<view :class="tempWaiguan==index?'color-item-select-class':'color-item-class'"
						@click="colorWaiguanClick(item,index)">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="custom-waiguan-color" @click="customWaiguanCLick()">{{waiguanColor}}</view>

		<uni-popup ref="right_popup" :animation="true" type="right" @maskClick="maskClickpopup()"
			@change="changePopup()">
			<view class="popup-reght-view">
				<view class="waiguan-color-text">内饰颜色</view>
				<view class="waiguan-list-view-box">
					<view :class="tempNeishi==999?'color-item-bc-select-view':'color-item-bc-view'">
						<view :class="tempNeishi==999?'color-item-select-class':'color-item-class'"
							@click="selectNeishiClickNOLimi()">不限</view>
					</view>
					<view v-for="(item,index) in colorNeishiDataList">
						<view :class="tempNeishi==index?'color-item-bc-select-view':'color-item-bc-view'">
							<view :class="tempNeishi==index?'color-item-select-class':'color-item-class'"
								@click="colorNeishiClick(item,index)">{{item.name}}</view>
						</view>
					</view>
				</view>
				<view class="custom-waiguan-color" @click="customNeishiCLick()">{{neishiColor}}</view>
			</view>
		</uni-popup>
		<uni-popup ref="custom_color_popup" :animation="true" type="bottom" @maskClick="maskClickpopup()"
			:isMaskClick="false" @change="changePopup()">
			<view class="custom_color_popup-view-box">
				<view class="waiguan-color-text">自定义颜色</view>
				<input v-model="inputColor" class="custom_color_popup-input-view" @input="inputTextColor"
					placeholder="请自定义颜色" placeholder-class="custom_color_popup_pac">
				<view class="custom_color_popup-input-btn" @click="customColorCLickBtn()">确定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getUsedSearchColour
	} from '@/api/search-car.js'
	import {getVehicleColor} from '@/api/secondhandCar.js'
	export default {
		data() {
			return {
				tempWaiguan: 1000,
				tempNeishi: 1000,
				model_id: '',
				obj: {
					'MID': 2
				},
				colorWaiguanDataList: [],
				colorNeishiDataList: [],
				waiguanColor: '自定义外观颜色',
				neishiColor: '自定义内饰颜色',
				inputColor: '',
				colorInta: 0

			}
		},
		onLoad(option) {
			if (option.model_id) {
				this.model_id = option.model_id
			}

			var that = this
			if (option.colorType == 'searchCar') {
				//获取外观颜色数据
				getUsedSearchColour(that.model_id, 1).then(res => {
					that.$utils.log("打印获取到的外观颜色 " + JSON.stringify(res))
					if (res.code == 0) {
						that.colorWaiguanDataList = res.data
						that.$forceUpdate()
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
				//获取内饰颜色数据
				getUsedSearchColour(that.model_id, 2).then(res => {
					that.$utils.log("打印获取到的内饰颜色 " + JSON.stringify(res))
					if (res.code == 0) {
						that.colorNeishiDataList = res.data
						that.$forceUpdate()
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			} else {
				//获取外观颜色数据
				getVehicleColor(1).then(res => {
					that.$utils.log("打印获取到的外观颜色 " + JSON.stringify(res))
					if (res.code == 0) {
						that.colorWaiguanDataList = res.data
						that.$forceUpdate()
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
				//获取内饰颜色数据
				getVehicleColor(2).then(res => {
					that.$utils.log("打印获取到的内饰颜色 " + JSON.stringify(res))
					if (res.code == 0) {
						that.colorNeishiDataList = res.data
						that.$forceUpdate()
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			}

		},
		methods: {
			inputTextColor(event) {
				this.$utils.log("打印输入的值   " + JSON.stringify(event.target.value))
			},
			changePopup() {},
			maskClickpopup() {},
			//点击自定义外观颜色
			customCLick() {

			},
			selectWaiguanClickNOLimi() {
				this.tempWaiguan = 999
				this.obj.appearance_name = '不限'
				this.obj.appearance_color = ''
				this.$refs.right_popup.open()
			},
			colorWaiguanClick(item, index) {
				this.obj.appearance_name = item.name
				this.obj.appearance_color = item.color
				this.tempWaiguan = index
				this.$refs.right_popup.open()
			},
			selectNeishiClickNOLimi() {
				this.obj.interior_name = '不限'
				this.obj.interior_color = ''
				this.tempNeishi = 999
				this.$refs.right_popup.close()
				this.btnClick()
			},
			colorNeishiClick(item, index) {
				this.obj.interior_name = item.name
				this.obj.interior_color = item.color
				this.tempNeishi = index
				this.$utils.log("打印obj的数据 " + JSON.stringify(this.obj))
				this.$refs.right_popup.close()
				this.btnClick()
			},
			btnClick() {
				// 获取当前页上的栈（数组形式）
				var pages = getCurrentPages()
				//上一页面 
				var prevPage = pages[pages.length - 2]
				prevPage.$vm.backData(this.obj) /// backData为A页面定义好的一个方法 调用该方法obj数据会返回到A页面backData方法中
				// 返回上一页
				uni.navigateBack()
			},
			//自定义外观颜色
			customWaiguanCLick() {
				this.colorInta = 0
				this.inputColor = ''
				this.$refs.custom_color_popup.open()
			},
			//自定义内饰颜色
			customNeishiCLick() {
				this.colorInta = 1
				this.inputColor = ''
				this.$refs.custom_color_popup.open()
			},
			customColorCLickBtn() {
				if (this.inputColor) {
					if (this.colorInta == 0) {
						this.obj.appearance_name = this.inputColor
						this.waiguanColor = this.inputColor
						this.$refs.right_popup.open()
					} else {
						this.obj.interior_name = this.inputColor
						this.neishiColor = this.inputColor
						this.btnClick()
					}
					this.$refs.custom_color_popup.close()
				} else {
					uni.showToast({
						title: '请输入颜色',
						icon: 'none'
					})
				}

			},
		}
	}
</script>

<style>
	page {
		background: white;
	}

	.popup-reght-view {
		height: 100%;
		width: 600rpx;
		padding-top: 20rpx;
		background-color: white;
	}

	.waiguan-color-view {
		margin-top: 32rpx;
		width: 100%;
		height: 58rpx;
		background: #1D212505;
		border-radius: 0rpx;
	}

	.waiguan-color-text {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #1D2125;
		line-height: 58rpx;
		opacity: 1;
		margin-left: 36rpx;
	}

	.custom-waiguan-color {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #0E59EA;
		opacity: 1;
		margin-left: 36rpx;
		margin-top: 46rpx;
	}

	.color-item-bc-view {
		width: 752rpx;
		height: 86rpx;
		background: #FFFFF;
		opacity: 1;
		border-radius: 0rpx;
		text-align: left;
	}

	.color-item-bc-select-view {
		width: 752rpx;
		height: 86rpx;
		background: #0E59EA;
		opacity: 1;
		border-radius: 0rpx;
		text-align: left;
	}

	.color-item-class {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 0rpx;
		line-height: 86rpx;
		color: #000026;
		opacity: 1;
		padding-left: 28rpx;
	}

	.color-item-select-class {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 86rpx;
		opacity: 1;
		padding-left: 30rpx;
	}

	.custom_color_popup-input-view {
		width: 100%;
		height: 100rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #0E59EA;
		opacity: 1;
		padding-left: 36rpx;
		background: #f9f9f9;
	}

	.custom_color_popup-view-box {
		width: 100%;
		height: auto;
		border-radius: 15rpx 15rpx 0rpx 0rpx;
		background-color: #FFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.custom_color_popup_pac {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #999999;
	}

	.custom_color_popup-input-btn {
		margin-bottom: 30rpx;
		margin-top: 20rpx;
		padding: 20rpx 250rpx;
		background-color: #0E59EA;
		color: #FFF;
		border-radius: 15rpx;
	}
</style>